<template>
	<div class="withdraw">
		<div class="withdraw_step">
			<div class="step_wrap">
				<el-steps :active="activeStep" finish-status="success" align-center>
					<el-step title="提交提现申请"></el-step>
					<el-step title="管理员受理"></el-step>
				<!-- 	<el-step title="提现成功"></el-step> -->
				</el-steps>
			</div>
			<div class="flex data_wrap">
				<div class="flex-1 flex">
					<img class="money_icon" src="../../assets/images/balance.png" alt="可提现金额">
					<div class="flex-1">
						<p class="money_data">￥{{balance}}</p>
						<p class="color-999">可提现金额</p>
					</div>
				</div>
				<div class="positionFlex"></div>
				<div class="flex-1 flex" style="position: relative;left: 45px;">
					<img class="money_icon" src="../../assets/images/frozen.png" alt="冻结金额">
					<div class="flex-1">
						<p class="money_data">￥{{balance_drawal}}</p>
						<p>冻结金额</p>
					</div>
				</div>
			</div>
			<div class="info_wrap">
				<div class="warn-box">
					<!-- <svg-icon style="margin-right:17px" icon-class="warn" :size="20" /> -->
					<p style="line-height:20px">提现说明！<br />1. 提现申请后，需要平台管理审核通过后自动转账到提现账户。<br />2. 请谨慎填写以免提现失败。</p>
				</div>
				<template v-if="activeStep==0">
					<el-form :model="form" label-width="240px">
						<el-form-item label="提现方式:">
							<el-radio v-model="form.type" :label="1">
								<span class="pay_type">
									<img style="width:25px;height:25px" src="../../assets/images/alipay.png"
										alt="支付宝">支付宝
								</span>
							</el-radio>
						</el-form-item>
						<el-form-item label="提现信息:">
							<el-input v-model="form.user" disabled>
							</el-input>
							<p style="font-size:12px;line-height:1.5;margin-top:8px" class="red-font" v-if="!form.user">
								为了资金安全，首次提现需要绑定提现账号，请联系客服 020-89814314，添加，提现人或公司全称和账号</p>
						</el-form-item>
						<el-form-item label="提现金额:">
							<el-input placeholder="请输入提现金额" v-model="form.amount" @blur="changeMoneyInput()">
							</el-input>
						</el-form-item>
						<el-form-item>
							<!-- <el-button v-if="$hasMethod('#recharge')" type="primary" size="medium" @click="submit">提交
							</el-button> -->
							<el-button type="primary" size="medium" @click="submit">提交
							</el-button>
						</el-form-item>
					</el-form>
				</template>
				<template v-else>
					<div class="info_table">
						<h5>提交资料</h5>
						<div class="table_row">
							<p class="row_label">提现金额</p>
							<p class="color-666 row_value">￥{{infoData.withdrawal_amount}}元</p>
						</div>
						<div class="table_row">
							<p class="row_label">收款方式</p>
							<p class="color-666 row_value">支付宝</p>
						</div>
						<div class="table_row">
							<p class="row_label">收款账号</p>
							<p class="color-666 row_value">{{infoData.payee_account}}</p>
						</div>
						<div class="table_row">
							<p class="row_label">收款人姓名</p>
							<p class="color-666 row_value">{{infoData.payee_name}}</p>
						</div>
						<div class="table_row">
							<p class="row_label">提交时间</p>
							<p class="color-666 row_value">{{infoData.apply_time}}</p>
						</div>
					</div>
					<div class="info_table">
						<h5>受理情况</h5>
						<div class="table_row">
							<p class="row_label">受理状态</p>
							<p class="row_value">
								<el-tag :type="infoData.status == 1 ? '' :infoData.status == 2 ? 'success' : 'danger'">
									{{infoData.status_name}}</el-tag>
							</p>
						</div>
						<div class="table_row">
							<p class="row_label">受理时间</p>
							<p class="color-666 row_value">{{infoData.check_time?infoData.check_time:'暂无'}}</p>
						</div>
						<div class="table_row" v-if="infoData.status == 3">
							<p class="row_label">原因</p>
							<p class="row_value">{{infoData.refuse_reason}}</p>
						</div>
					</div>
					<p class="text-center">
						<el-button style="margin-left:20px" size="small" @click="$router.back()">返 回</el-button>
					</p>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		myAmount,
		// withdrawalList,
		withdrawalApply,
		withdrawalInfo,
		getPayeeInfo
	} from "@/api/account";
	export default {
		data() {
			return {
				activeStep: 0,
				balance: 0,
				balance_end: 0,
				balance_drawal:0,
				form: {
					type: 1,
					user: '',
					amount: ''
				},
				infoData: {}
			}
		},
		// props: ['withdrawId'],
		methods: {
			changeMoneyInput() {
				const pattern = /^[0-9]+([.]{1}[0-9]{1,2})?$/; // 正数的正则表达式
				// 不符合正整数时
				if (!pattern.test(this.form.amount)) {
					// input 框绑定的内容为空
					this.form.amount = '';
				}
			},
			submit() {
				
				if (!this.form.user) {
					return;
				}
				if (this.form.amount <= 0) {
					this.$message({
						message: "提现金额不能为空，不能小于等于零",
						type: "warning"
					})
					return;
				}
				withdrawalApply(this.form.amount).then(res => {
					console.log(res);
					this.withdrawId = res.withdrawal_id;
					this.getInfo();
				})
			},
			getData() {
				myAmount().then(res => {
					console.log(res);
					const {
						balance,
						balance_end,
						balance_drawal,
					} = res;
					// this.balance = balance;
					// this.frozen = frozen;
					this.balance= balance
					this.balance_end= balance_end
					this.balance_drawal=balance_drawal
				})
			},
			getAccount() {
				this.activeStep = 0;
				this.form = {
					type: 1,
					user: '',
					amount: ''
				};
				getPayeeInfo().then(res => {
					const {
						payeename,
						alipayaccount
					} = res;
					if (alipayaccount) {
						this.form.user = alipayaccount + '（' + payeename + '）';
					}
				})
			},
			getInfo() {
				withdrawalInfo(this.withdrawId).then(res => {
					console.log(res);
					this.infoData = res && res.withdrawal_info ? res.withdrawal_info : {};
					console.log(this.infoData);
					this.activeStep = this.infoData.status == 2 ? 2 : 1;
				})
			}
		},
		mounted() {
			this.getData();
			if (this.withdrawId) {
				this.getInfo();
			} else {
				this.getAccount();
			}
		},
		watch: {
			$route(val) {
				console.log(val);
				if (this.withdrawId) {
					this.getInfo();
				} else {
					this.getAccount();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.info_table {
		border: 1px solid #eeeeee;

		h5 {
			height: 40px;
			background: #f5f5f5;
			color: #666666;
			text-align: center;
			line-height: 40px;
		}

		.table_row {
			display: flex;
			line-height: 38px;

			&+.table_row {
				border-top: 1px solid #eeeeee;
			}
		}

		.row_label {
			width: 125px;
			text-align: center;
			font-weight: bold;
			border-right: 1px solid #eeeeee;
		}

		&+.info_table {
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.row_value {
			padding-left: 55px;
		}
	}

	.withdraw {
		background-color: #f3f6fb;
	}

	.withdraw_step {
		width: 800px;
		margin: auto;
		background-color: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10px;
	}

	.step_wrap {
		padding: 30px 0;
		border-bottom: 1px solid #eeeeee;
	}

	.money_icon {
		width: 55px;
		height: 55px;
		margin-right: 100px;
		
	}

	.money_data {
		font-size: 25px;
		margin-bottom: 5px;
	}

	.data_wrap {
		display: flex;
		border-bottom: 1px solid #eeeeee;
		justify-content: center;
		&>div {
			padding: 28px 50px;
		}
	}

	.info_wrap {
		padding: 20px 50px;
	}

	.pay_type {
		img {
			vertical-align: middle;
			margin-right: 10px;
		}
	}

	/deep/.el-input.is-disabled .el-input__inner {
		color: #333333;
		background-color: #ffffff;
	}

	/deep/.el-step__icon {
		width: 40px;
		height: 40px;
		background-color: #999999;
		border-color: #999999;
		color: #ffffff;
	}

	/deep/.el-step__head.is-process .el-step__icon {
		background-color: #2993ff;
		border-color: #2993ff;
	}

	/deep/.el-step__head.is-success .el-step__icon {
		background-color: #ffffff;
		border-color: #2993ff;
		color:#2993ff;

		.el-step__icon-inner {
			font-size: 20px;
			font-weight: bold;
		}
	}

	/deep/.el-step__title {
		font-size: 14px;
		color: #333333;
		font-weight: normal;
	}

	/deep/.el-step__icon-inner {
		font-size: 16px;
	}

	/deep/.el-step.is-horizontal .el-step__line {
		height: 4px;
		background-color: #999999;
		left: 65%;
		right: -35%;
		top: 16px;
	}
	.positionFlex{
		border-left: 1px solid #e6e6e6;
		position: relative;
		left: 40px;
	}
</style>
